<template>
  <div>
    <div class="box">
      <div class="header">
        <van-nav-bar left-arrow @click-left="onClickLeft" />
        <p>排行榜</p>
      </div>
      <div class="main">
        <p class="topList">瞬时吸欧TOP榜</p>
        <div class="midbody">
          <div class="nav">
            <div class="pim" v-for="(item, index) in 10" :key="index">
              <span class="text_1">{{ index }}</span>
              <div class="one">
                <img
                  class="image_1"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/psfs7zhcexnugnfuo2oaxk4c10b93asv6tp114185db-739f-485b-b896-d26dbdeb6389"
                />
              </div>
              <div class="two">
                <span class="text_2">诗人的情诗</span>
                <span class="text_3">5876</span>
              </div>
              <div class="three">
                <img
                  class="image_2"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps6wxjphir51a3nzvcvqt3co8xd61jdvyl9b482e52-9bf0-4660-99c9-32f59a545cf2"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="footer">
        <button><van-icon name="arrow-left" /></button>
        <button><van-icon name="arrow" /></button>
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
};
</script>
<style scoped>
.box {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(
    180deg,
    rgba(207, 232, 255, 1) 0,
    rgba(207, 232, 255, 1) 0,
    rgba(143, 107, 170, 1) 100%,
    rgba(143, 107, 170, 1) 100%
  );
}
.header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
}
.header p {
  margin: 0 auto;
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  font-family: SourceHanSansSC-regular;
}
.main {
  flex: 1;
}
.midbody {
  height: 550px;
  margin: 0 15px;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 1px 6px 27px 0px rgba(0, 0, 0, 0.26);
  padding-top: 50px;
}
.nav {
  height: 450px;
  overflow: auto;
}
.topList {
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  font-family: SourceHanSansSC-medium;
  /* text-align: center; */
  font-weight: 700;
}
.pim {
  display: flex;
  align-items: center;
  padding: 14px 0;
  background-color: rgba(236, 236, 236, 0.35);
  margin-top: 13px;
  justify-content: center;
}
.one {
  width: 50px;
  height: 50px;
  line-height: 20px;
  /* background-color: rgba(190, 190, 190, 100); */
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  margin-right: 25px;
  border-radius: 25px;
}
.text_1 {
  display: block;
  margin-right: 10px;
}
.two {
  width: 136px;
  height: 51px;
  text-align: center;
  line-height: 25px;
  /* background-color: rgba(190, 190, 190, 100); */
  margin-right: 16px;
}
.text_2 {
  color: rgba(23, 23, 23, 1);
  display: block;
  font-size: 18px;
}
.text_3 {
  color: rgba(153, 153, 153, 1);
  font-size: 16px;
}
.three {
  background-color: rgba(190, 190, 190, 100);
}
.three img {
  width: 78px;
}
.footer {
  display: flex;
  justify-content: space-evenly;
  background-color: rgba(248, 248, 248, 100);
}
.footer button {
  border: 0;
  background-color: rgba(248, 248, 248, 100);
}
</style>
